

.search {
  position: relative;
  width:var(--width);
  height: 90rpx;
  background-color: var(--color);
  border-radius: 42rpx;
  line-height:84rpx;
  font-size: 36rpx;
  z-index: 50;
  box-sizing: border-box;
  padding: 0 35rpx;
  transition: all .15s ease-in-out;
}

.search image {
  width:40rpx;
  height:40rpx;
}

.search input {
  margin-left: 20rpx;
  font-family: "PingFang SC";
  font-size: 34rpx;
  height: 50rpx;
}
.input {
  display: flex;
  height:100%;
  align-items: center;
}
.mask {
  visibility: hidden;
  background-color: var(--maskColor);
  position: fixed;
  z-index:20;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  // overflow: hidden;
}
.mask.active {
  visibility: visible;
}
.search.active {
  width:650rpx;
}
.detail.active {
  display: flex;
  flex-direction: column;
  margin:80rpx 0;
  background-color: tomato;
}
.history {
  width:100%;
  margin-top: 40rpx;
  visibility: hidden;
  // display: flex;
  // flex-wrap: wrap;
  white-space: pre-wrap;
  span {
    display: inline-block;
    background-color: var(--color);
    height:36rpx;
    line-height: 36rpx;
    margin-right:10rpx;
    padding:10rpx 26rpx;
    font-size: 26rpx;
    border-radius: 16rpx;
    color:#888;
  }
}
.search-btn {
  visibility: hidden;
  position: absolute;
  right:0;
  top:0;
  background-color: #FFCF56;
  color:#fff;
  margin:0;
  padding:0 40rpx;
  border-radius: 0 42rpx 42rpx 0;
  &:active {
    background-color: #ffc23f;
  }
}
.search.active {
  .search-btn {
    visibility: visible;
  }
  .history {
    visibility: visible;
  }
}
